<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/common.css" media="all">
    <script src="/js/layui/layui.all.js"></script>
    <script src="/admin/js/token.js"></script>
    <script src="../viewstyle/config/config2.js"></script>
    <!--<script src="/admin/js/token.js"></script>-->
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div style="text-align: center;">
                <div class="layui-inline">
                    <input class="layui-input" name="id" id="test-table-demoReload" placeholder="类型名称"
                           autocomplete="off">
                </div>

                <div class="layui-inline">
                    <button id="btnsearch" class="layui-btn layuiadmin-btn-admin">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>搜索
                    </button>
                </div>
            </div>
        </div>


        <div class="layui-card-body">
            <table class="layui-hide" id="stationType" lay-filter="t"></table>
        </div>

    </div>
</div>

</body>

<script type="text/html" id="tb">
    <div class="layui-container">
        <span class="">站点列表</span>
    </div>
</script>
<script type="text/html" id="tol">
    <button class="layui-btn layui-btn-sm layui-icon layui-icon-add-1 " lay-event="add">
        添加站点类型
    </button>
</script>
<script type="text/html" id="changeAndEdit">
    <input type="button" id="edit" value="编辑" class="layui-btn layui-btn-sm " lay-event="update"/>
    <button class="btn layui-btn layui-btn-sm" lay-event="change">
        {{#if(d.stationTypeStatus=='启用'){ }}
        禁用
        {{# }else{}}
        启用
        {{# }}}
    </button>
</script>
<script>
    layui.use(['table'], function () {
        var table = layui.table;
        var $ = layui.$;
        table.render({
            elem: "#stationType",
            id: "t",
            url: "/admin/station-type/chastationtype",
            toolbar: "#tol",
            cols: [[
                {
                    title: "编号",
                    width: "30%",
                    field: "stationTypeId",
                    align: "center",
                },
                {
                    title: "类型名称",
                    width: "30%",
                    field: "stationTypeName",
                    align: "center",
                },
                {
                    title: "状态",
                    width: "20%",
                    field: "stationTypeStatus",
                    align: "center",
                },
                {
                    title: "操作",
                    width: "20%",
                    toolbar: "#changeAndEdit",
                    align: "center",
                },
            ]],
            page: true,
            limit:40
        });
        //搜索的监听事件
        $("#btnsearch").click(function () {
            table.reload('t', {
                where: {
                    stationTypeName: $("#stationtypename").val()
                },
                page: {
                    curr: 1
                }
            });
        });

        //键盘回车监听
        $(window).keypress(function (event) {
            if(event.which === 13){
                $('#btnsearch').click();
            }
        })

        //添加和返回的监听事件
         table.on('toolbar(t)', function (obj) {
              var e = obj.event;
              switch (e) {
                  case "add":
                      layer.open({
                          title:"新增站点",
                          content:"AddStationType.html",
                          type:2,
                          area:["100%","100%"]
                      })
                      break;
              }
          })
        table.on('tool(t)', function (obj) {
            var getdata = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            switch (layEvent) {
                case "update":
                    layui.data("data", {
                        key: "getdata",
                        value: getdata
                    });
                    layer.open(
                        {
                            title: "编辑",
                            content: "UpdateStationType.html",
                            type: 2,
                            area: ["100%", "100%"],
                            end: function () {
                                $(".layui-laypage-btn").click();
                            }
                        }
                    )
                    break;
                case "change":
                    var close = layer.confirm("确定要"+$(tr).find("button:last").html()+"吗？", {
                        title: "提示",
                        btn: ["确定", "取消"],
                        btn1: function () {
                            $.ajax({
                                url: "/admin/station-type/editStationTypeStatus",
                                type: "post",
                                data: {
                                    getdata: getdata
                                },
                                success: function (res) {
                                    if (res.code == 200) {
                                        var message = tr.find("button:last").html()
                                        if (res.data.stationTypeStatus == "禁用") {
                                            tr.find("td:eq(2)").html("禁用");
                                            tr.find("button:last").html("启用");
                                        } else {
                                            tr.find("td:eq(2)").html("启用");
                                            tr.find("button:last").html("禁用");
                                        }
                                        layer.msg(message + '成功', {
                                            icon: 1,
                                            time: 1000
                                        });
                                        layer.close(close);
                                        return;
                                    }
                                    layer.msg('失败', {
                                        icon: 2,
                                    });
                                },
                                error: function () {
                                    layer.msg('网络原因编辑失败', {
                                        icon: 2
                                    });
                                }
                            })
                        }
                    });
                    break
            }
        })
    });
</script>
</html>
